<template>
    <view class="page" :style="themeColor">
        <view class="flex benben-position-layout flex flex-wrap align-center index_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
            <view class='flex flex-wrap align-center justify-between flex-sub index_fd0_0'>
                <view class='flex flex-wrap align-center justify-center index_fd0_0_c0'>
                    <image class='index_fd0_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"19.png"'></image>
                </view>
                <view class='flex flex-wrap align-stretch justify-center'>
                </view>
               <!-- <view class='flex flex-wrap align-center index_fd0_0_c2'>
                    <image class='index_fd0_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"20.png"'></image></view> -->
				<view class='flex flex-wrap align-center mine_fd0_0_c2' @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/main/platformMessage/platformMessage`">
					<image class='mine_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL + "20.png"'></image>
					<benben-message-num :messageNum="system_num" class='mine_fd0_0_c2_c1' size='24' color='#fff' background-color='red'>
					</benben-message-num>
				</view>
            </view>
        </view>
        <!---flex布局flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center index_flex_1">
            <view :style="platform == 1 ? {marginTop: 16 + 'px'} : {marginTop: 0 + 'px'}" class='flex flex-wrap align-center flex-sub index_fd1_0' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/search/search`">
                <image class='index_fd1_0_c0' mode="aspectFit" :src='STATIC_URL+"22.png"'></image>
                <input class='flex-sub index_fd1_0_c1' type="text" placeholder="请输入" confirm-type="done" :maxlength="-1" :disabled='true' placeholder-style="color:rgba(102, 102, 102, 1);font-size:28rpx" v-model="fd1_0_c1" />
            </view>
        </view>
        <!---flex布局flex布局结束-->
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#cd962d"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<block v-else>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-center benben-flex-layout index_flex_2">
			    <view style="position: relative">
			        <swiper ref="benbenSwiperfd2_0" @change="bannerIndexfd2_0 = $event.detail.current" class='flex position-relative index_fd2_0' previous-margin="0rpx" next-margin="0rpx" :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>
			
			            <swiper-item class='flex index_fd2_0' v-for="(v, k) in swiperList" :key="k" @tap.stop="swiperClick(v)">
			                <image class='index_fd2_0_c1_c0' mode="aspectFill" :src='v.thumb'></image>
			            </swiper-item>
			        </swiper>
			        <view style="position: absolute" class="flex dot flex align-center justify-center index_swiperDotfd2_0">
			            <template v-for="(item, index) in (swiperList.length)">
			                <view :key="index" v-if="bannerIndexfd2_0 == index" class="flex dot selected flex align-center justify-center index_swiperDotSelectedfd2_0">
			                </view>
			                <view :key="index" v-else class="flex dot unselected flex align-center justify-center index_swiperDotUnselectedfd2_0">
			                </view>
			            </template>
			        </view>
			    </view>
			</view>
			
			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout index_flex_3">
			    <view class='flex flex-wrap align-center'>
			        <image class='index_fd3_0_c0' mode="aspectFill" :src='STATIC_URL+"24.png"'></image>
			        <text class='index_fd3_0_c1'>新闻资讯</text>
			    </view>
			    <view class='flex flex-wrap align-center justify-end index_fd3_1' v-for="(v, k) in list" :key="k" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/main/messageDetails/messageDetails?aid=${v.aid}`">
			        <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
			            <text class='index_fd3_1_c0_c0'>{{v.title}}</text>
			            <text class='index_fd3_1_c0_c1'>{{v.create_time}}</text>
			        </view>
			        <view class='flex flex-wrap align-center index_fd3_1_c1'>
			            <image class='index_fd3_1_c1_c0' mode="aspectFill" :src='v.img_url'></image>
			        </view>
			    </view>
				<u-loadmore v-if="last_page > 1" class="loadmore" font-size="24" :status="status"
					:icon-type="iconType" :load-text="loadText" />
			</view>
			<!---flex布局flex布局结束-->
			
			<view class="noData_other" v-if="list.length == 0 && !isShow">
				<image src="/static/empty/no.png"></image>
				<view>没有资讯~</view>
			</view>
		</block>
		
		<app-update ref="update" :auto="true"></app-update>
    </view>
</template>
<script>
    export default {
        components: {},


        data() {
            return {
                "bannerIndexfd2_0": 0,
                "fd1_0_c1": "",
				"system_num": 0,  // 消息数量
				"swiperList": [],  // 轮播图
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				"isShow": true,
				"platform": 0
            };
        },
        computed: {
            themeColor() {
                return this.$store.getters.themeColor
            },
			userInfo() {
				return this.$store.state.userInfo
			}
        },
        watch: {},
        onLoad(options) {
            if (!global.token) {
				uni.reLaunch({
					url: '/pages/tabBar/login/login'
				})
			}
			this.getSwiper();
			this.getList();
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {
			if (uni.getSystemInfoSync().platform == 'ios') {
				this.platform = 1
			} else {
				this.platform = 0;
			}
			if (global.token) {
				this.getNewsNumber();
				if (this.userInfo.audit_status == -1) {
					uni.navigateTo({
						url: '/pages/dlzc/next/next?type=1'
					})
				} else if (this.userInfo.audit_status == 2) {
					uni.navigateTo({
						url: '/pages/dlzc/next/next?type=2'
					})
				} else if (this.userInfo.audit_status == 0) {
					uni.reLaunch({
						url: '/pages/tabBar/login/login'
					})
				}
			}
        },
        onHide() {

        },
        onResize() {

        },
        // 下拉刷新
        onPullDownRefresh() {
        	this.page = 1;
        	this.is_pull = true;
        	this.isShow = true;
        	this.getList();
        },
        // 上拉加载
        onReachBottom() {
        	if (this.page >= this.last_page) return;
        	this.status = 'loading';
        	this.page++;
        	setTimeout(() => {
        
        		if (this.page >= this.last_page) this.status = 'nomore';
        		else this.status = 'loading';
        		this.is_pull = false;
        		this.getList();
        	}, 500)
        },
        onPageScroll(e) {

        },
        methods: {
			// 轮播图  post636e02b419726
			getSwiper() {
				this.$api.post(global.apiUrls.post636e02b419726, {
					operationadstype_id: 3
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.swiperList = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			swiperClick(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: '/pages/main/messageDetails/messageDetails?aid=' + item.operationarticle_id
					})
				} else if (item.type == 2) {
					uni.navigateTo({
						url: '/pages/course/courseDetails/courseDetails?aid=' + item.course_id
					})
				}
			},
			// 新闻资讯列表
			getList() {
				this.$api.post(global.apiUrls.post636cc56034725, {
					operationarticlecolumn_id: 10,
					page: this.page
				}).then(res => {
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page;
						if (this.is_pull) {
							this.list = res.data.data.data;
						} else {
							this.list = this.list.concat(res.data.data.data);
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 获取消息未读数  post64abbd2825701
			getNewsNumber() {
				this.$api.post(global.apiUrls.post64abbd2825701, {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.system_num = res.data.data.system_num;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
        }
    };
</script>
<style lang="scss" scoped>
	.mine_fd0_0_c2_c1 {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
	}
	
	.mine_fd0_0_c2_c0 {
		width: 48rpx;
		height: 48rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	
	.mine_fd0_0_c2 {
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto !important;
    }

    .index_flex_0 {
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
    }

    .index_fd0_0_c2 {
        width: 48rpx;
        height: 48rpx;
    }

    .index_fd0_0_c0_c0 {
        width: 100%;
        height: 100%;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .index_fd0_0_c0 {
        width: 203rpx;
        height: 56rpx;
    }

    .index_fd0_0 {
        padding: 0rpx 32rpx 0rpx 32rpx;
    }

    .index_flex_1 {
        background: url(/static/images/21.png) no-repeat, transparent;
        height: 388rpx;
        background-size: 100% auto !important;
        padding: 0rpx 24rpx 0rpx 24rpx;
    }

    .index_fd1_0_c1 {
        margin: 0rpx 0rpx 0rpx 16rpx;
    }

    .index_fd1_0_c0 {
        width: 31rpx;
        height: 31rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .index_fd1_0 {
        background: rgba(255, 255, 255, 1);
        // margin: 16rpx 0rpx 0rpx 0rpx;
        border-radius: 34rpx 34rpx 34rpx 34rpx;
        padding: 18rpx 32rpx 18rpx 32rpx;
    }

    .index_flex_2 {
        margin: -120rpx 0rpx 0rpx 0rpx;
    }

    .index_numberfd2_0_c0 {
        background: #525050;
        position: absolute;
        bottom: 20rpx;
        right: 30rpx;
        width: 80rpx;
        height: 40rpx;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 46rpx;
        font-weight: 400;
    }

    .index_fd2_0_c1_c0 {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
    }

    .index_fd2_0 {
        width: 702rpx;
        height: 300rpx;
    }

    .index_swiperDotUnselectedfd2_0 {
        border: 1px solid rgba(0, 0, 0, 0.3);
        background: var(--benbenbgColor1);
        width: 16rpx;
        height: 16rpx;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
        margin: 0rpx 6rpx 0rpx 0rpx;
        font-size: 24rpx;
        color: #fff;
    }

    .index_swiperDotSelectedfd2_0 {
        background: var(--benbenbgColor1);
        width: 34rpx;
        height: 10rpx;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
        margin: 0rpx 6rpx 0rpx 0rpx;
        font-size: 24rpx;
        color: #fff;
    }

    ::v-deep .index_swiperDotfd2_0 {
        position: absolute;
        bottom: 20rpx;
        left: 0rpx;
        right: 0rpx;
    }

    .index_flex_3 {
        padding: 0rpx 24rpx 0rpx 24rpx;
        margin: 32rpx 0rpx 0rpx 0rpx;
    }

    .index_fd3_1_c1_c0 {
        width: 258rpx;
        height: 160rpx;
        border-radius: 16rpx;
    }

    .index_fd3_1_c1 {
        margin: 0rpx 0rpx 0rpx 24rpx;
        border-radius: 16rpx;
    }

    .index_fd3_1_c0_c1 {
        color: #999999;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 33rpx;
        margin: 47rpx 0rpx 0rpx 0rpx;
    }

    .index_fd3_1_c0_c0 {
        color: #333333;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 40rpx;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

    .index_fd3_1 {
        border-bottom: 1px solid #eee;
        padding: 32rpx 0rpx 32rpx 0rpx;
    }

    .index_fd3_0_c1 {
        margin: 0rpx 0rpx 0rpx 8rpx;
        color: #333333;
        font-size: 36rpx;
        font-weight: 700;
        line-height: 50rpx;
    }

    .index_fd3_0_c0 {
        width: 40rpx;
        height: 40rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
    }
</style>